<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    收集的数据：<input type="text" v-model="num">
    <hr>
    米：<input type="text" v-model="meters">
    <br>
    千米：<input type="text" v-model="kilometers">
    <hr>
    <!-- 监听对象的变化 -->
     <!-- v-model收集值 给对象的特定属性obj.属性 -->
     <input type="text" v-model="obj.age">
  </div>
   <script src="./vue.js"></script>
   <script>
      new Vue({
        el:"#app",
        data(){
          return {
             num:0,
             meters:0,//米
             kilometers:0,//千米
             obj:{
              name:"周杰伦",
              age:48
             }
          }
        },
        methods:{}, //组件用到的方法
        computed:{},//组件用到的计算属性
        watch:{//组件用到的监听属性 侦听器
          // 监听data数据的变化 可以获取到新的值和旧的值,
          // watch和computed的区别 
          // 计算属性计算data数据，基于依赖缓存，只有依赖的数据变化了才会重新计算，计算属性内部不可以执行异步操作
          // watch 监听数据的变化，可以接受到新的值和旧的值，可以执行异步操作
          num(newVal,oldVal){
            console.log("新的值",newVal)
            console.log("旧的值",oldVal)
          },
          meters(newVal,oldVal){ //监听米的变化
           this.kilometers=newVal/1000; //改变千米
          },
          kilometers(newVal,oldVal){ //监听千米的变化
           this.meters=newVal*1000; //改变米
          },
          // watch监听对象和数组的写法2
          obj:{
            handler(newVal,oldVal){
                console.log(newVal,"新的值")
                console.log(oldVal,"旧的值")
            },
            deep:true,// 深度监听 监听对象 开启深度监听
            immediate:true //立即监听 进入页面就执行一次 监听一次
          }
        }
      })
   </script>
</body>
</html>